<template>
  <div class="container">
    <h1>{{ title }}</h1>
    <div class="content">
      <div id="swiper">
        <!--轮播图展示区域-->
        <div class="slide-img" @mouseover="stop" @mouseleave="autoplay">
          <!--使用vue中的transition实现图片的无缝滑动效果-->

          <div class="slide" v-for="(item, index) in banners" :key="index">
            <transition name="show">
              <img :src="item.icon" :key="index" v-if="mark === index" />
            </transition>
          </div>
        </div>
        <!--底部导航条部分(不需要可以删除)-->
        <!-- 上一页 -->
        <ul class="slide-page">
          <li @click="sub">&lt;</li>
          <li
            v-for="(item, index) in banners"
            @click="goto(index)"
            :key="index"
          >
            <a :class="{ red: mark === index }">{{ index + 1 }}</a>
          </li>
          <!-- 下一页 -->
          <li @click="add">&gt;</li>
        </ul>
      </div>

      <div class="form-container">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="活动名称">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="活动区域">
            <el-select v-model="form.region" placeholder="请选择活动区域">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="活动时间">
            <el-col :span="11">
              <el-date-picker
                type="date"
                placeholder="选择日期"
                v-model="form.date1"
                style="width: 100%"
              ></el-date-picker>
            </el-col>
            <el-col class="line" :span="2">-</el-col>
            <el-col :span="11">
              <el-time-picker
                placeholder="选择时间"
                v-model="form.date2"
                style="width: 100%"
              ></el-time-picker>
            </el-col>
          </el-form-item>
          <el-form-item label="即时配送">
            <el-switch v-model="form.delivery"></el-switch>
          </el-form-item>
          <el-form-item label="活动性质">
            <el-checkbox-group v-model="form.type">
              <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
              <el-checkbox label="地推活动" name="type"></el-checkbox>
              <el-checkbox label="线下主题活动" name="type"></el-checkbox>
              <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="特殊资源">
            <el-radio-group v-model="form.resource">
              <el-radio label="线上品牌商赞助"></el-radio>
              <el-radio label="线下场地免费"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="活动形式">
            <el-input type="textarea" v-model="form.desc"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">立即创建</el-button>
            <el-button>取消</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="form-container" v-for="(item, index) in dataArr" :key="index">
        <div class="form-item-row">
          <span>{{ item.filed_label }}</span>
          <el-date-picker
            v-if="item.filed_type == 1"
            v-model="item.input_value"
            type="date"
            placeholder="选择日期"
            class="form-item-row-right"
          >
          </el-date-picker>
          <el-select
            v-if="item.filed_type == 6"
            v-model="item.input_value"
            placeholder="请选择"
            @change="changeSelect"
            class="form-item-row-right"
          >
            <el-option
              v-for="(inItem, index) in item.filed_value_arr"
              :key="index"
              :label="inItem"
              :value="inItem"
            >
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="bottom-form-container" >
        <el-button @click="btnSaveForm">保存表单</el-button>
      </div>
    </div>
    <tab-bar :tab-index="tabIndex" />
  </div>
</template>

<script>
import TabBar from "../../components/TabBar";
const mDate = new Date();
const year = mDate.getFullYear();
const month = mDate.getMonth();

const day = mDate.getDate();
export default {
  name: "Home",
  components: {
    TabBar,
  },
  //		绑定属性:轮播图的播放速度,组件调用时可以修改的参数
  props: {
    speed: {
      type: Number,
      default: 2000,
    },
  },
  data: function () {
    return {
      tabIndex: 0,
      title: "home的title",
      mark: 0,
      banners: [
        {
          icon: "https://img0.baidu.com/it/u=3146675320,2672479520&fm=253&fmt=auto&app=138&f=PNG?w=550&h=294",
        },
        {
          icon: "https://img1.baidu.com/it/u=3373095484,4082453827&fm=253&fmt=auto&app=138&f=JPEG?w=499&h=312",
        },
      ],
      show: false,
      dataArr: [],
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
    };
  },
  created: function () {
    this.autoplay();
    this.getFormDataArr();
  },
  methods: {
    //这个是做提交表单处理
    btnSaveForm() {
      const postBody = this.dataArr;
      //发送fetch/axios请求
    },
    getFormDataArr() {
      //进来的时候首先要获取数组
      const formDataArr = [
        {
          filed_type: "1", //控件的类型 展示判断
          filed_label: "开始时间",
          filed_value: null,
          filed_name: "FN_SX001",
          input_value: null, //右边控件的value 默认是为控
          isEdit: 1, //是否可以编辑
        },
        {
          filed_type: "1", //控件的类型 展示判断
          filed_label: "结束时间",
          filed_value: null,
          filed_name: "FN_SX002",
          input_value: null, //右边控件的value 默认是为控
          isEdit: 1, //是否可以编辑
        },
        {
          filed_type: "6", //控件的类型 展示判断 6表示下拉框
          filed_label: "毕业院校",
          filed_value: "中南大学,湖南大学,湖南科技大学,长沙理工大学",
          filed_name: "FN_SX003",
          input_value: null, //右边控件的value 默认是为控
          isEdit: 1, //是否可以编辑
        },
        {
          filed_type: "6", //控件的类型 展示判断 6表示下拉框
          filed_label: "专业",
          filed_value:
            "计算机专业,数学专业,物理专业,化学专业,土木工程专业,英语专业,国贸经济与贸易专业",
          filed_name: "FN_SX004",
          input_value: null, //右边控件的value 默认是为控
          isEdit: 1, //是否可以编辑
        },
      ];
      for (let i = 0; i < formDataArr.length; i++) {
        const item = formDataArr[i];
        if (item.filed_type == 1) {
          //因为默认 input_value=null;
          //所以展示默认值
          item.input_value = "";
        } else if (item.filed_type == 6) {
          //如果是6的时候 下拉框多个选项
          item.filed_value_arr = item.filed_value.split(",");
          item.input_value = "";
        }
      }
      this.dataArr = formDataArr;
      console.log("输出结果", this.dataArr);
    },
    onSubmit() {},
    //下一页
    add() {
      this.stop();
      setTimeout(() => {
        this.mark++;
        if (this.mark == this.banners.length) {
          this.mark = 0;
        }
      }, 30);
      this.autoplay();
    },
    changeSelect(val) {
      console.log("请选择监听", val);
    },
    //上一页
    sub() {
      this.stop();
      setTimeout(() => {
        this.mark--;
        if (this.mark == -1) {
          this.mark = this.banners.length;
        }
      }, 30);
      this.autoplay();
    },
    //自动播放
    autoplay() {
      this.timer = setInterval(() => {
        this.mark++;
        if (this.mark == this.banners.length) {
          this.mark = 0;
        }
      }, this.speed);
    },
    //鼠标移入停止，移除继续
    stop() {
      clearInterval(this.timer);
    },
    //点击后跳转到指定页
    goto(num) {
      //				console.log(num);
      this.stop();
      setTimeout(() => {
        this.mark = num;
      }, 30);
      this.autoplay();
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
/* @import url("//unpkg.com/element-ui@2.15.8/lib/theme-chalk/index.css"); */

.container {
  display: flex;
  flex-direction: column;
  flex: 1;
  background-color: #fff;
}
.content {
  flex: 1;
  flex-direction: column;
}

#swiper {
  margin: 0%;
}

.slide-img {
  margin-top: 50px;
  margin: 0 auto;
  position: relative;
  width: 600px;
  height: 200px;
  overflow: hidden;
}
.slide {
  margin: 0 auto;
  position: absolute;
  border: 1px;
}

.slide img {
  width: 600px;
  height: 200px;
}
.slide h3 {
  position: relative;
  color: whitesmoke;
  left: 32px;
  top: 161px;
}

/*主要的滑动效果代码*/
/*进入的初始状态*/
.show-enter {
  transform: translateX(600px);
}
.show-enter-active {
  transition: all 0.8s ease;
}
/*进入的结束状态*/
.show-enter-to {
  transform: translateX(0px);
}
/*离开的初始状态*/
.show-leave {
  transform: translateX(0px);
}
.show-leave-active {
  transition: all 0.8s ease;
}
/*离开的结束状态*/
.show-leave-to {
  transform: translateX(-600px);
}

.slide-page {
  margin: 0 auto;
  padding: 10px;
  width: 600px;
  position: relative;
  background: rgba(0, 0, 0, 0.7);
}

.slide-page li {
  display: inline-block;
  padding: 0 10px;
  cursor: pointer;
  color: #fff;
}

.slide-page li .on {
  text-decoration: underline;
}

.red {
  background: indianred;
  width: 5px;
  height: 5px;
  border-radius: 8px;
  position: relative;
}
.test-rem {
  width: 2rem;
  height: 5rem;
  background-color: blue;
}

.form-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0px;
}
.form-item-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: 10px;
  padding: 2px 6px;
}
.form-item-row-right {
  margin-left: 10px;
}
.bottom-form-container {
  width: 100vw;
  height: 80px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
</style>
